.cityList {
  margin-bottom: 600px;
  height: 100%;
  position: relative;
  padding-top: 40px;
  .city {
    .title {
      background-color: #f9f9f9;
      padding-left: 10px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #999;
      border-bottom: solid 1px #eee;
    }
    .name {
      padding-left: 20px;
      width: 100%;
      height: 45px;
      line-height: 45px;
      border-bottom: solid 1px #eee;
    }
  }
  .city-index {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 15px;
    z-index: 1;
    height: 90%;
    box-sizing: border-box;
    padding-top: 50px;
    text-align: center;
    .city-index-item {
      flex: 1;
      .city-index-active {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        display: inline-block;
        color: #fff;
        background-color: #21b87a;
        border-radius: 100%;
      }
    }
  }
  .space-box {
    height: 400px;
    width: 100px;
  }
}
